<template>
	<view class="page_wrapper">
		<block v-if="mathExam.status === 'undo'">
			<view class="calc_list_block">
				<view class="calc" v-for="(calc, index) in calcList" :key="index">
					{{calc.firstNum}} {{calc.calcType}} {{calc.secondNum}} = 
				</view>
			</view>
			<view class="btns_block">
				<view class="fcz_btn delete_btn" @click="removeThisData()">删除该记录</view>
				<view class="fcz_btn download_btn" @click="updateExamResult()">上传答题结果</view>
			</view>
		</block>
		<block v-else>
			<view class="page_sub_title">答题记录</view>
			<view class="form_block">
				<view class="form_row top_line">
					<view class="row_title">答题数量：</view>
					<view class="row_val">{{mathExam.calcTotalCount}}</view>
				</view>
				<view class="form_row">
					<view class="row_title">答对数量：</view>
					<view class="row_val">{{mathExam.rightCount}}</view>
				</view>
				<view class="form_row">
					<view class="row_title">答错数量：</view>
					<view class="row_val">{{mathExam.errorCount}}</view>
				</view>
				<view class="form_row">
					<view class="row_title">答题用时：</view>
					<view class="row_val">{{mathExam.useTimeTxt}}</view>
				</view>
				<view class="form_row">
					<view class="row_title">答题图片：</view>
					<view class="row_val">
						<block v-if="mathExam.resultImg">
							<image @click="previewImage" :src="mathExam.resultImg" class="result_img" mode="aspectFit" />
						</block>
						<block v-else>
							没有上传
						</block>
					</view>
				</view>
				<view class="form_row">
					<view class="row_title">备注：</view>
					<view class="row_val">{{mathExam.remark}}</view>
				</view>
			</view>
			<view class="btns_block">
				<view class="fcz_btn download_btn" @click="downloadCalcs()">下载试题</view>
			</view>
		</block>
	</view>
</template>

<script>
	import {request} from '@/utils/request.js'
	export default {
		data() {
			return {
				examId: 0,
				mathExam: {},
				calcList: []
			}
		},
		onLoad(option) {
			this.examId = option.examId
			this.fetchData()
		},
		methods: {
			fetchData() {
				uni.showLoading()
				request.get( 
					'/mathExams/id,' + this.examId, {}
				).then(res => {
					uni.hideLoading()
					console.log(res)
					uni.setNavigationBarTitle({
						title: res.title
					});
					this.mathExam = res
					this.calcList = res.calcLogList
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
			},
			updateExamResult() {
				uni.navigateTo({
					url: '/pages/mathExamLogs/mathExamLog/uploadExamResult?examId=' + this.examId
				})
			},
			previewImage() {
				uni.previewImage({
					urls: [this.mathExam.resultImg],
					longPressActions :{
						itemList:['保存图片'],
						success(data) {
							let imgurl = this.mathExam.resultImg
							that.saveImage(imgurl)
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				})
			},
			saveImage(imgurl){
				// console.log(imgurl)
				uni.downloadFile({
					url:imgurl,
					success(res){
						// console.log(res)
						let url = res.tempFilePath
						uni.saveImageToPhotosAlbum({
							filePath:url,
							success() {
								uni.showToast({
									title:'保存成功',
									icon:"none"
								})
							},
							fail(err) {
								console.log('保存失败',err)
								uni.showToast({
									title:'保存失败',
									icon:"none"
								})
							}
						})
					}
				})
			},
			removeThisData() {
				const $this = this
				uni.showModal({
					title: '提示',
					content: '删除后将不可恢复？确定删除？',
					success: function (res) {
						if (res.confirm) {
							request.delete( '/mathExams/id,' + $this.examId ).then(res => {
								uni.hideLoading()
								console.log(res)
								uni.showToast({
									title: '删除成功',
									icon: 'none'
								})
								uni.navigateBack()
							}).catch(err => {
								uni.hideLoading()
								console.log(err)
							})
						}
					}
				})
			},
			downloadCalcs() {
				const filePathNew = new Date().getTime() +'.jpeg'
				const url = request.wrapperToken('https://api.fcz.pub/mathExams/' + this.examId + '/export.jpeg')
				uni.downloadFile({
					url: url,
					success: (res) => {
						if (res.statusCode === 200) {
							console.log('下载成功')
							console.log(res.tempFilePath)
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success() {
									uni.showToast({
										 position: "center",
										 icon: "none",
										 title: "图片保存成功，请到手机相册查看"
									})
								 },
								 fail(e) {
									 uni.showModal({
										 content: "保存相册失败，errCode：" + e.errCode + "，errMsg：" + e.errMsg + "，errSubject：" + e.errSubject,
										 showCancel: false
									 });
								 }
							})
						}else{
							console.log('下载失败~~~~~~~~~~~~~~~~~')
						}
					},
					fail(e) {
							console.log('下载失败~~~~~~~~~~~~~~~~fail~')
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.page_wrapper{
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	.calc_list_block{
		flex: 1;
		display: flex;
		flex-wrap: wrap;
		overflow: scroll; 
		align-content: flex-start;
		.calc{
			width: 25%;
			height: 50px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	.btns_block{
		height: 60px;
		display: flex;
		justify-content: center;
		align-items: center;
		.fcz_btn{
			flex: 0.4;
			height: 40px;
			color: white;
			background-color: #67C23A;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 5px;
		}
		.delete_btn{
			background-color: #f56c6c;
			margin-right: 20px;
		}
		.download_btn{
			background-color: #67C23A;
		}
	}
	.form_block{
		flex: 1;
		padding: 0px 20px;
		overflow: scroll;
		.form_row{
			min-height: 50px;
			border-bottom: 1px solid #e2e2e2;
			display: flex;
			align-items: center;
			.row_title{
				width: 120px;
			}
			.row_val{
				.result_img{
					width: 80px;
					height: 120px;
				}
			}
		}
	}
}
</style>
